<template>
  <div>
    <search></search>
    <view class="cate">
      <scroll-view scroll-y class="cate-left">
        <block v-for="(item,index) in cates" :key="index">
          <view class="cate-left-item" :class="{active: index==tabnum}" @tap="togge(index)">{{item.cat_name}}</view>
        </block>
      </scroll-view>
      <scroll-view scroll-y class="cate-right">
        <block v-for="(item,index) in rightData.children" :key="index">
          <view class="floor">
            <view class="floor-head">{{item.cat_name}}</view>
            <view class="floor-body">
              <block v-for="(subItem,subIndex) in item.children" :key="subIndex">
                <view class="floor-body-item" @tap="getToList(subItem.cat_name)">
                  <image :src="subItem.cat_icon"></image>
                  <view>{{subItem.cat_name}}</view>
                </view>
              </block>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </div>
</template>

<script>
import search from "@/components/search"
import request from "@/utils/request"
export default {
  data () {
    return {
      // 所有的分类数据
      cates: [],
      tabnum: 0,
      // 右侧品牌数据
      rightData:[]
    }
  },
  components: {
    search
  },
  methods: {
    getToList(name){
      wx.navigateTo({
        url:'/pages/goods_list/main?keyword='+name
        // url:`/pages/goods_list/main?keyword=${name}`
      })
    },
    togge (index) {
      this.tabnum = index;
      this.rightData=[];
      setTimeout(()=>{
        this.rightData=this.cates[index];
      },0)
    }
  },
  mounted () {
    request("https://www.zhengzhicheng.cn/api/public/v1/categories").then(res=>{
      // 结构赋值
      let {message}=res.data
      this.cates=message
      this.rightData=message[0]
    })
  }
}
</script>

<style lang="scss" scoped>
.cate {
  position: fixed;
  background-color: pink;
  top: 98rpx;
  bottom: 0rpx;
  left: 0rpx;
  right: 0rpx;
  display: flex;
  &-left {
    width: 200rpx;
    background-color: #f4f4f4;
    &-item {
      line-height: 100rpx;
      text-align: center;
      &.active {
        background-color: #fff;
        color: red;
        position: relative;
        &::before {
          content: '';
          background-color: red;
          position: absolute;
          width: 7rpx;
          top: 15rpx;
          bottom: 15rpx;
          left: 0rpx;
        }
      }
    }
  }
  &-right {
    flex: 1;
    background-color: #fff;
    .floor{
      &-head{
        text-align: center;
        padding: 20rpx 0;
        &::before,&::after{
          content: "/";
          color: #ccc;
          padding: 0 20rpx;
        }
      }
      &-body{
        display: flex;
        flex-wrap: wrap;
        &-item{
          width: 33.33%;
          text-align: center;
          padding: 10rpx 0;
          font-size: 16px;
          image{
            width: 140rpx;
            height: 110rpx;
          }
        }
      }
    }
  }
}
</style>

